<template>
  <div id="app">
    <div class="Game" :class="stateCls">
        <div class="roadback"></div>
        <div class="roadway">
            <div class="Hero" v-if="state!==0" :style="'transform:translateX('+ heroX +'px)'">
                <div class="light"></div>
                <div class="body"></div>
            </div>
            <div class="Enemy" ref="enemy" :class="'enemy' + enemyType" :style="'left:'+ enemyX +'px'" @animationiteration="enemyend">
                <div class="body"></div>
            </div>
        </div>
        <div class="Start" v-if="state===0" @click="start"></div>
        <div class="Kilo">{{kilo}}</div>
        <div class="Fail">
            <div class="failtext"></div>
            <div class="retry"></div>
        </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'app',
  components: {
  },
  computed :{
    stateCls () {
        if (this.state === 1) {
            return 'running'
        } else if (this.state === 2) {
            return 'crashed'
        }
    }
  },
  data() {
      return {
          state: 0,
          heroX: 0,
          enemyX: 0,
          kilo:0,
          enemyType: 0,
          heroCls: 'left',
          ticker: {}
      }
  },
  mounted () {
    this.events()
    this.update()
  },
  methods: {
      start () {
        this.state = 1
      },
      update () {
        let rect = 0
        this.ticker = setInterval(() => {
            rect = this.$refs.enemy.getBoundingClientRect()
            if(this.state!==0){
                this.kilo++
            }
            if (rect.top + rect.height > 720 && this.heroX === this.enemyX) {
                this.state = 2
                this.ticker&&clearInterval(this.ticker)
            }
        }, 20)
      },
      enemyend () {
        this.enemyX = Math.random() < 0.5 ? 0 : 178
        this.enemyType = Math.floor(Math.random() * 3)
      },
      events() {
          window.addEventListener('keydown', (e)=>{
              if(this.state==2){return false}
              if (e.keyCode === 37) {
                  this.heroX = 0
              } else if (e.keyCode === 39) {
                  this.heroX = 178
              }
          })
      }
  }
}
</script>

<style lang="scss" >
body{

}
body{
	background:#000;
    padding:0;
    margin:0;
}
.Game{
	width:480px;
	height:800px;
	position:absolute;
	margin:auto;
	left:0;
	top:0;
	bottom:0;
	right:0;
	overflow:hidden;
	border:#fff 5px solid;
    &.running{
        .roadback{
        	-webkit-animation:roadRun 1.2s linear infinite;
            @-webkit-keyframes roadRun{
            	100%{ -webkit-transform:translateY(800px);}
            }
        }
        .Enemy{
            animation-play-state:running;
        }
    }
    &.crashed{
        .Enemy{
            animation-play-state:paused;
        }
    }
    .roadback{
        background:url(assets/road.png) repeat-y;
    	width:480px;
    	height:1600px;
    	position:absolute;
    	left:0;
    	top:-800px;
    }
    .roadway{
        width:320px;
    	height:800px;
    	position:absolute;
    	left:50%;
    	top:0;
    	margin-left:-160px;
    }
}

.Hero{
	// -webkit-transition:-webkit-transform .5s ease;
	width:142px;
	height:162px;
	position:absolute;
	bottom:10px;
	left:0;
    animation:heroShow .5s;
    @keyframes heroShow {
        0%{ transform:translateY(200px);}
    }
    &.left{
    	-webkit-transform:translateX(0);
    }
    &.right{
    	-webkit-transform:translateX(178px);
    }
    .body{
        background:url(assets/hero.png) no-repeat 50% 0,
    	url(assets/heroDied.png) no-repeat -1000% 0;
    	height:100%;
    }
    .light{
        -webkit-animation:light .6s ease infinite;
    	background:url(assets/carLight.png) no-repeat 50% 0;
    	width:142px;
    	height:57px;
    	position:absolute;
    	top:-35px;
    	left:-4px;
    }
    @-webkit-keyframes light{
    	0%{ opacity:1}
    	50%{ opacity:0.3}
    	100%{ opacity:1}
    }
}

.Start{
	background:url(assets/start.png) no-repeat;
	width:260px;
	height:86px;
	position:absolute;
	left:50%;
	top:600px;
	margin-left:-130px;
	z-index:10;
	cursor:pointer;
}
.Kilo{
	background:url(assets/kilo.png) no-repeat;
	width:83px;
	height:100px;
	line-height:100px;
	text-align:right;
	position:absolute;
	right:0;
	top:20px;
	font-size:32px;
	font-weight:700;
	color:#FFEA00;
	padding-right:50px;
}
.Enemy{
	width:142px;
	position:absolute;
    height:160px;
    top:-160px;
    -webkit-animation:speed 4s linear infinite;
    animation-play-state:paused;
    @-webkit-keyframes speed{
        100%{ -webkit-transform:translateY(1000px);}
    }
    .body{
        background:url(assets/car0.png) no-repeat 50% 0;
    }

    .body{
    	height:100%;
    	position:relative;
    }
    &.enemy0{
    	height:160px;
    	top:-160px;
        .body{
        	background:url(assets/car0.png) no-repeat 50% 0;
        }
    }
    &.enemy1{
    	height:160px;
    	top:-160px;
        .body{
        	background:url(assets/car1.png) no-repeat 50% 0;
        }
    }
    &.enemy2{
    	height:220px;
    	top:-220px;
        .body{
        	background:url(assets/car2.png) no-repeat 50% 0;
        }
    }
    &.way0 {
        left:0;
    }
    &.way1 {
        right:0;
    }
}

.Game.roadPlay .Hero{
	-webkit-animation:show .5s ease;
	display:block;
}
@-webkit-keyframes show{
	0%{ -webkit-transform:translateY(172px);}
}
.hide{
	display:none;
}


.Fail{
	/*background:rgba(0,0,0,0.9);*/
	width:380px;
	height:240px;
	border-radius:10px;
	/*border:#fff 5px solid;*/
	position:absolute;
	left:50px;
	top:50%;
	margin-top:-130px;
	z-index:111;
	display:none;
}
.Fail .failtext{
	background:url(assets/failedNotice.png) no-repeat 50% 0;
	width:100%;
	height:116px;
	display:block;
}
.Fail .retry{
	background:url(assets/playAgainBtn.png) no-repeat;
	width:266px;
	height:99px;
	display:block;
	margin:25px auto 0;
}

.Game.crashed .Enemy,
.Game.crashed .roadback{
	-webkit-animation-play-state:paused;
}
.Game.crashed .Hero .body{
	background:url(assets/heroDied.png) no-repeat;
}
.Game.crashed .Hero .light{
	display:none;
}
.Game.crashed .Fail{
	-webkit-animation:failShow .5s ease;
	display:block;
}
@-webkit-keyframes failShow{
	0%{ -webkit-transform:translateY(250px);}
	80%{ -webkit-transform:translateY(-12px);}
	100%{ -webkit-transform:translateY(0);}
}
body{
    overflow:hidden;
}
</style>